<template>
    <div id="event">
      <div class="event_content">
          <div class="swiper_warp">
              <div class="swiper_box">
                  <p>MEETING &nbsp;GROUP</p>
                  <swiper ref="mySwiper" :options="swiperOption">
                      <swiper-slide v-for="(item,index) in swiperArr" :key="index">
                          <img class="pic" :src="item.url" alt="">
                      </swiper-slide>
                      <div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div>
                  </swiper>
              </div>
              
              <div class="swiper-button-prev" slot="button-prev">
                <img src="../assets/images/swiper_left.png" alt="">
              </div>
              <div class="swiper-button-next" slot="button-next">
                <img src="../assets/images/swiper_right.png" alt="">
              </div>
          </div>
          <div class="calender">
              <!-- <full-calendar :events="fcEvents" locale="en" @dayClick='dayClick'></full-calendar> -->
              <cal></cal>

          </div>
         </div>

    </div>
</template>
<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import cal from "./cal";
export default {
  data() {
    return {
      swiperOption: {
        notNextTick: true,
        loop: true,
        autoplay: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet(index, className) {
            return `<span class="${className} swiper-pagination-bullet-custom">${index +
              1}</span>`;
          }
        }
      },
      swiperArr: [
        { url: require("../assets/images/about_img1.png")  },
        { url: require("../assets/images/about_img2.png")  },
        { url: require("../assets/images/about_img3.png")  },
        { url: require("../assets/images/about_img1.png") }
      ],
      fcEvents: [
        {
          title: "Sunny Out of Office",
          start: "2019-09-05",
          end: ""
        }
      ]
    };
  },

  components: {
    swiper,
    swiperSlide,
    cal
    // "full-calendar": require("vue-fullcalendar")
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    dayClick(day, $event) {
      console.log($event);
      debugger;
      alert(day);
    }
  }
};
</script>
<style lang="less" scoped>
#event {
  width: 100%;
  height: 100%;
  padding: 1%;
  
}
.event_content{
  width: 90%;
  margin: auto;
  background-image: url("../assets/images/event_bg.png");
  background-size: 100% 150px;
  background-repeat: no-repeat;
}
.swiper_warp {
  position: relative;
  width: 80%;
  margin: auto;
  height: 100%;
}
.swiper_box {
  width: 70%;
  margin: auto;
  height: 500px;
  text-align: center;
  //   position: relative;
  p {
    font-size: 20px;
    color: rgba(88, 180, 72, 0.8);
    height: 100px;
    line-height: 100px;
    font-weight: 550;
  }
  .pic {
    width: 100%;
    height: 400px;
  }
}
.calender {
  width: 100%;
  height: 300px;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
  background-image: none;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
  background-image: none;

}
</style>
